<template>

    <mi-list-page>

        <mi-table :list="list">
            <template #topBar>
<!--                <mi-top-bar-->
<!--                    :data="topToolbar"-->
<!--                >-->
<!--                </mi-top-bar>-->
            </template>
            <template #discount="{row}">
                <el-space>
                    <template v-if="row.discount_type == 1">
                        <el-tag >满减券</el-tag>
                        <span>立减{{row.discount_price}}元</span>
                    </template>
                    <template v-if="row.discount_type == 2">
                        <el-tag effect="plain">折扣券</el-tag>
                        <span>可享{{row.discount_rate/10}}折优惠</span>
                    </template>
                </el-space>
            </template>

            <template #getType="{row}">
                <el-space v-if="row.get_type == 'take'">
                    <el-tag type="success">{{coupon.getTypeOptions.take.title}}</el-tag>
                </el-space>
                <el-tag type="danger" v-if="row.get_type == 'auto'">{{coupon.getTypeOptions.auto.title}}</el-tag>
            </template>

            <template #residue="{row}">
                <span>{{row.total_num != -1 ?  row.total_num-row.give_num : '不限'}}</span>
            </template>
        </mi-table>

    </mi-list-page>

<!--    <mi-dialog v-model="edit.show" :title="$route.meta.title">-->
<!--        <coupon-edit />-->
<!--    </mi-dialog>-->

</template>

<script setup lang="ts">

import { provide, reactive, ref} from "vue"
import {makeModelAuth} from "@/utils/auth";
import global from "@/dict/global";
import {useRoute} from "vue-router";
import List from "@/model/list";
import Edit from "@/model/edit";
import {FormInstance} from "element-plus";
import Search from "@/model/search";
import coupon from "@/dict/coupon";

const route = useRoute()
const initWhere = Object.assign({}, route.query)
const tdWidth = global.tdWidth
const auth = makeModelAuth('store.userCoupon')

// toolbar 事件
const topToolbar = [
    {
        auth: auth.add,
        type: 'success',
        icon: 'Plus',
        title: '新增',
        event: async (ids:Array<number>) => {
            edit.info = {}
            edit.show = true
        }
    },
    {
        auth: auth.del,
        title: '删除',
        type: 'danger',
        icon: 'Delete',
        event: (ids:any) => {
            list.del({
                url: `/${auth.del}`,
                ids: ids
            })
        }
    },
]

const lineToolbar = [
    {
        auth: auth.edit, title: '编辑', event: (row:any) => {
            edit.info = row
            edit.show = true
        }
    },
    // {
    //     auth: auth.del, title: '删除', type: 'del', event: (row:any) => {
    //         list.del({
    //             url: `/${auth.del}`,
    //             ids: [row.id]
    //         })
    //     }
    // },
]

const list = reactive(new List({
    where: initWhere,
    url: `/${auth.index}`,
    columns:[
        {name: "select", type:'selection'},
        {name: "id", title:'ID', width:tdWidth.id},
        {name: "title", title:'名称'},
        {name: "discount", title:'优惠内容', type:'slot', slot:'discount'},
        {name: "get_type", title:'推广方式', type:'slot', slot:'getType'},
        {name: "min_price", title:'最低消费金额',},
        // {title: "操作", type:'toolbar',toolbar:lineToolbar},
    ]
}))

const edit = reactive(new Edit({}))

const searchRef = ref<FormInstance>()
const search = reactive(new Search({
    list:list,
}))

const exportOut = reactive(new Edit({}))



provide("list", list)
provide("edit", edit)



</script>

<style scoped>

</style>
